<template >
  <div class="source">
    <div class="sourceMainSearcch">
      <div class="searchContent">
        <el-form :inline="true" :model="queryForm" size="mini">
          <el-form-item label="资源标题">
            <el-input v-model="queryForm.sourceTitle" :min="0" :max="10" controls-position="right" style="width: 150px;"></el-input>
          </el-form-item>
          <el-form-item label="资源类型">
            <el-select v-model="queryForm.sourceType" placeholder="请选择资源类型">
              <el-option label="文本" value="text"></el-option>
              <el-option label="图文" value="news"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button type="warning" @click="handleReset">重置</el-button>
          </el-form-item>
          <el-form-item style="float: right;">
            <el-button type="success" icon="el-icon-download" @click="exportExcel">导出</el-button>
            <el-button type="danger" icon="el-icon-plus" @click="editsource(null)">新增资源</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="sourceMain" style="margin-top: 10px">
      <div class="tableContent">
        <el-table
          id="mySourceTable"
          ref="sourcetable"
          :data="tableData"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            align="center">
          </el-table-column>
          <el-table-column
            prop="type"
            label="类型"
            align="center">
          </el-table-column>
          <el-table-column
            prop="title"
            label="资源标题"
            align="center">
          </el-table-column>
          <el-table-column
            prop="eventkey"
            align="center"
            label="事件标识"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="状态"
            align="center"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span :class="scope.row.status == 'normal' ? 'color-success' : 'color-danger'">{{ scope.row.statusStr }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="170"
            align="center"
            fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="handleSourceEdit(scope.row)">编 辑</el-button>
              <el-button type="danger" size="small" icon="el-icon-delete" @click="handleDeleteSource(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 底部分页 -->
        <div class="bottom-pagination">
          <el-pagination
            :current-page.sync="pageNum"
            :page-sizes="[5, 10, 30, 50]"
            :page-size="pageSize"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            background
            @size-change="handleSizeChange"
            @current-change="getSourceList()">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

export default {
  components: {
  },
  data() {
    return {
      showAutoDetail: false,
      queryForm: {
        sourceTitle: '',
        sourceType: ''
      },
      // 分页参数
      pageNum: 1,
      pageSize: 10,
      total: 500,
      tableData: [],
      multipleSelection: [],
      currentPage: 1
    }
  },
  created() {
    this.getSourceList()
  },
  methods: {
    // 获取资源表单列表
    getSourceList() {
      this.$http.get('/Response/list?offset=' + (this.pageNum - 1) * this.pageSize + '&limit=' + this.pageSize + '&title=' + this.queryForm.sourceTitle + '&type=' + this.queryForm.sourceType).then(response => {
        if (response.data.code === 0) {
          response.data.data.rows.forEach(element => {
            if (element.status === 'normal') {
              element.statusStr = '正常'
            } else {
              element.statusStr = '隐藏'
            }
          })
          // 数据总数赋值
          this.total = response.data.data.total
          this.tableData = response.data.data.rows
        }
      }).catch(error => {
        this.$message({
          showClose: true,
          message: '获取资源列表异常{' + error + '}',
          type: 'error'
        })
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    clickAutoDetail() {
      this.showAutoDetail = true
    },
    editsource(source) {
      // 编辑
      this.$router.push({
        path: '/weixin/sourceedit',
        query: {
          id: source && source.id
        }
      })
    },
    // 删除操作
    handleDeleteSource(scope) {
      this.$confirm('此操作将永久删除 ' + scope.title + ' 该资源，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post('/Response/remove', { id: scope.id }).then(response => {
          if (response.data.code === 0) {
            this.getSourceList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        }).catch(errMsg => {
          this.$message({
            type: 'error',
            message: '删除异常' + errMsg
          })
        })
      }).catch(() => {
      })
    },
    // 编辑
    handleSourceEdit(scope) {
      this.$router.push({
        path: '/weixin/sourceedit',
        query: {
          id: scope && scope.id
        }
      })
    },
    // 分页
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.pageNum = 1
      this.getSourceList()
    },
    // 导出excel方法
    exportExcel() {
      /* generate workbook object from table */
      const wb = XLSX.utils.table_to_book(document.querySelector('.el-table__fixed-right'))
      /* get binary string as output */
      const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '资源表.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbout)
        }
      }
      return wbout
    },
    handleQuery() {
      this.getSourceList()
    },
    handleReset() {
      this.queryForm.sourceTitle = ''
      this.queryForm.sourceType = ''
      this.getSourceList()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import 'src/styles/variables.scss';
.source {
  padding: 10px 20px;
  .sourceMainSearcch {
    padding: 18px 10px 0px 10px;
    background-color: white;
  }
  .sourceMain {
    padding: 10px;
    background-color: white;
  }
}
.el-dropdown-link {
  color: $color-primary;
  margin-left: 15px;
  cursor: pointer;
  font-size: $font-size-mini;
}
.bottom-pagination {
  text-align: right;
  margin-top: 20px;
}
.building-detail {
  min-height: 60vh;
  list-style: none;
  .item {
    color: $color-text-1;
    line-height: 1.4;
    label {
      color: $color-text-3;
      font-weight: 300;
      font-size: 15px;
      margin-right: 20px;
    }
  }
  .item + .item {
    margin-top: 12px;
  }
}
.color-success {
  font-size: 14px;
  color:green;
}
.color-danger {
  font-size: 14px;
  color:red;
}
</style>
